<template>
	<view>
		<view class="box-bg">
			<!-- 导航栏组件 -->
			<!-- shadow 导航栏下是否有阴影 -->
			<!-- statusBar （fixed为true时，status-bar默认值为true）是否包含状态栏 -->
			<!-- fixed 是否固定顶部 -->
			<!-- @clickLeft="showCity" @clickRight="scan() 两个点击事件 -->
			<uni-nav-bar shadow statusBar :fixed="true" color="#333333" backgroundColor="#FFFFFF" leftIcon="" rightIcon=""
				@clickLeft="scan()" @clickRight="search()">
				<block slot="left" class="left">
					<uni-icons class="uni-icons-scan" type="scan" size="20"></uni-icons>
				</block>
				<view class="input-view">
					<!-- 搜索图标 -->
					<uni-icons class="input-uni-icon" type="search" size="22" color="#999" />
					<!-- @confirm="confirm" 什么作用 -->
					<input confirm-type="search" class="nav-bar-input" v-model="spotName" type="text" placeholder="输入搜索关键词"
						@confirm="search" />
				</view>
				<block slot="right">
					<view class="search">
						搜索
					</view>
				</block>
			</uni-nav-bar>
		</view>
	</view>
</template>

<script>
	import eventBus from '@/js/eventBus.js'
	export default {
		components: {},
		data() {
			return {
				spotName: ""
			}
		},
		methods: {
			search() {
				//提示
				uni.showToast({
					title: '搜索'
				})
				eventBus.$emit('search',this.spotName)
			},
			scan() {
				//提示
				uni.showToast({
					title: '扫码'
				})
			},
			confirm() {
				//提示
				uni.showToast({
					title: '搜索'
				})
			}
		},
		
		//下拉刷新，目前无用
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #F8F8F8;
	}
	
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 0 0 5px ; //上下留白
		
	}
	
	//扫码
	.uni-icons-scan{
		line-height: $nav-height;
		margin-left: 20px;
		
	}
	
	//搜索框
	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		width: 600rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	//搜索框的图标(放大镜)
	.input-uni-icon {
		line-height: $nav-height;
	}

	//搜索框的文本框
	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 380rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
	
	.search{
		padding-right: 20px;
	}
</style>
